<template>
  <div>
    <br />
    <h4 class="d-flex justify-content-between">
      <span class="text-muted">节点信息</span>
    </h4>
    <ul class="list-group mb-3">
      <li class="list-group-item d-flex justify-content-between lh-condensed">
        <div>
          <h5>节点名称</h5>
          <div class="text-success">id:{{ mote.info.name }}</div>
        </div>
      </li>
      <li class="list-group-item justify-content-between bg-light">
        <h4>防御类型选取</h4>
        <div class="btn-group" role="group" aria-label="Basic example">
          <button
            type="button"
            class="btn btn-outline-primary"
            v-on:click="mote.info.defenceType = 0"
          >
            特征库比对
          </button>
          <button
            type="button"
            class="btn btn-outline-success"
            v-on:click="mote.info.defenceType = 1"
          >
            机器学习算法
          </button>
          <button
            type="button"
            class="btn btn-outline-secondary"
            v-on:click="mote.info.defenceType = 2"
          >
            深度学习模型
          </button>
        </div>
      </li>
    </ul>

    <div class="card p-2">
      <div v-if="mote.info.defenceType == 0">
        <label for="">特征库选取</label>
        <div>
          <span class="text-success">特征库文件：</span>
          <span class="text-primary">{{ mote.info.feature }}</span>
        </div>
        <input type="file" placeholder="上传" id="oUpload" />
        <button class="btn btn-outline-primary" v-on:click="upload(0)">
          确认上传
        </button>
      </div>
      <div v-if="mote.info.defenceType == 1">
        <label for="">机器学习算法模型选取</label>
        <div>
          <span class="text-success">机器学习模型文件：</span>
          <span class="text-primary">{{ mote.info.almodel }}</span>
        </div>
        <input type="file" placeholder="上传" id="oUpload" />
        <button class="btn btn-outline-primary" v-on:click="upload(1)">
          确认上传
        </button>
      </div>
      <div v-if="mote.info.defenceType == 2">
        <label for="">深度学习算法模型文件</label>
        <div>
          <span class="text-success">神经网络文件：</span>
          <span class="text-primary">{{ mote.info.dlmodel }}</span>
        </div>
        <input type="file" placeholder="上传" id="oUpload" />
        <button class="btn btn-outline-primary" v-on:click="upload(2)">
          确认上传
        </button>
      </div>
      <div v-if="mote.isAttackNode">
        <hr />
        <div class="btn-group" role="group" aria-label="Basic example">
          <button
            type="button"
            class="btn btn-outline-primary"
            v-on:click="attackIndex = 0"
          >
            {{ attackArr[0] }}
          </button>
          <button
            type="button"
            class="btn btn-outline-danger"
            v-on:click="attackIndex = 1"
          >
            {{ attackArr[1] }}
          </button>
          <button
            type="button"
            class="btn btn-outline-warning"
            v-on:click="attackIndex = 2"
          >
            {{ attackArr[2] }}
          </button>
        </div>
        <br />
        <br />
        <div class="btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-outline-secondary">
            {{ attackArr[attackIndex] }}
          </button>
          <button
            type="button"
            class="btn btn-outline-danger"
            v-on:click="changeToAttack()"
          >
            Attack
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  attackArr,
  SELECTNONE,
  SELECTMOTE,
  SELECTLINE,
  SELECTREMOVEMOTE,
  SELECTREMOVELINE,
  CHOOSEMOTE,
  CHOOSEATTACK,
} from "@/module/name.js";
export default {
  name: "ChooseMoteInfo",
  props: {
    mote: Object,
    select: Object,
  },
  data: function () {
    return {
      attackArr: attackArr,
      attackIndex: 0,
    };
  },
  methods: {
    upload: function (type) {
      let oUpload = document.getElementById("oUpload");
      let value = oUpload.value;
      let arr = value.split("\\");
      value = arr[arr.length - 1];
      if (type == 2) {
        this.mote.info.dlmodel = value;
      } else if (type == 1) {
        this.mote.info.almodel = value;
      } else if (type == 0) {
        this.mote.info.feature = value;
      }
    },
    changeToAttack: function () {
      if (this.select.type == SELECTNONE) {
        this.select.type = CHOOSEATTACK;
      }
    },
  },
};
</script>

<style>
</style>